import React, {ReactElement} from 'react';
import {Navigate} from "react-router-dom";
import {useSelectorAuth} from "@/store/slices/auth";
// 登陆条件：localStorage.getItem("token")有值即条件成立。

// 1 ->props:any
// function Index(props:any) {
//     // 如果已登陆
//     if(localStorage.getItem("token")){
//         return props.children;
//     }
//     // 未登陆
//     return (
//         <Navigate to={"/login"}/>
//     );
// }

// 2
// type TProps = {
//     children:ReactElement
// }
// function Index(props:TProps) {
//     // 如果已登陆
//     if(localStorage.getItem("token")){
//         return props.children;
//     }
//     // 未登陆
//     return (
//         <Navigate to={"/login"}/>
//     );
// }

// 3- Index的值必须是一个函数组件，组件的属性类型为any
// const Index:React.FC<any> = (props)=>{
//     // 如果已登陆
//     if(localStorage.getItem("token")){
//         return props.children;
//     }
//     // 未登陆
//     return (
//         <Navigate to={"/login"}/>
//     );
// }
// export default Index;

// 4-
type TProps = {
    children:ReactElement
}
const Index:React.FC<TProps> = (props)=>{
    const authState = useSelectorAuth();
    // 如果已登陆
    if(authState.token){
        return props.children;
    }
    // 未登陆
    return (
        <Navigate to={"/login"}/>
    );
}
export default Index;